<template>
  <div class="app-container">
    <p style="color: #a7a199;font-size: 13px;margin-left: 20px">菜品消耗单详情</p>
    <el-form :model="foodConSumInfo" :inline="true">
      <el-form-item label="店铺:" >
        <span>{{foodConSumInfo.mtOrgname}}</span>
      </el-form-item>
      <el-form-item label="ERP组织:" label-width="100px">
        <span>{{foodConSumInfo.orgName}}</span>
      </el-form-item>
      <el-form-item label="业务日期:" label-width="100px">
        <span>{{parseTime(foodConSumInfo.biztime)}}</span>
      </el-form-item>
      <el-form-item label="订单日期范围:" label-width="110px">
        <span v-if="foodConSumInfo.orderstarttimegte">{{parseTime(foodConSumInfo.orderstarttimegte)}}-{{parseTime(foodConSumInfo.orderendtimelte)}}</span>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" ref="ttable" :data="foodConSumItemList" @row-click="dbGetFoodConSumGoodsItem" highlight-current-row>
      <el-table-column label="菜品Sku" align="center" prop="foodskuid" >
<!--        <template slot-scope="scope">-->
<!--            <el-tooltip effect="light" placement="top" content="双击查看详情" >-->
<!--              <span>{{scope.row.foodskuid}}</span>-->
<!--            </el-tooltip>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column label="菜品" align="center" prop="foodname"/>
      <el-table-column label="菜品规格" align="center" prop="foodspec"/>
      <el-table-column label="已出库数量" align="center" prop="outamount" width="80"/>
      <el-table-column label="未出库数量" align="center" prop="notoutamount" width="80"/>
      <el-table-column label="状态" align="center" prop="status" width="60"/>
      <el-table-column label="备注" align="center" prop="remark"/>
    </el-table>

<!--    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getFoodconsumInfo()"/>-->

    <div style="margin-top: 70px">
    <el-divider content-position="left"><span style="color: #a7a199">菜品消耗物料明细</span></el-divider>
    </div>
    <div v-if="open">
    <el-form :model="form" :inline="true" >
      <el-form-item label="菜品Sku:" prop="foodskuid" >
        <span>{{form.foodskuid}}</span>
      </el-form-item>
      <el-form-item label="菜品名称:" prop="foodname" label-width="100px">
        <span>{{form.foodname}}</span>
      </el-form-item>
      <el-form-item label="消耗数量:" prop="amount" label-width="100px">
        <span>{{form.amount}}</span>
      </el-form-item>
    </el-form>
    </div>
      <el-table v-loading="loading1" :data="foodConSumGoodsItemList" >
        <el-table-column label="美团物品编码" align="center" prop="mtGoodsCode" />
        <el-table-column label="美团物品" align="center" prop="mtGoodsName"/>
        <el-table-column label="数量" align="center" prop="consumptionamount" width="110"/>
        <el-table-column label="基准单位" align="center" prop="baseunitName" width="110"/>
        <el-table-column label="创建时间" align="center" prop="createTime" width="200"/>
      </el-table>

<!--    <pagination v-show="total1>0" :total="total1" :page.sync="queryParams1.pageNum" :limit.sync="queryParams1.pageSize" @pagination=""/>-->

  </div>
</template>

<script>
import {listFoodconsumItem} from '@/api/mt/foodconsumItem'
import {listFoodconsumGoodsItem} from '@/api/mt/foodconsumGoodsItem'
import {listFoodconsum} from '@/api/mt/foodconsum'

export default {
  name: "mtFoodconsumItem",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      loading1:false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // total1:0,
      // 美团菜品消耗单主表格数据
      foodconsumList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mtFoodconsumid:null,
      },
      // queryParams1:{
      //   pageNum: 1,
      //   pageSize: 10,
      // },
      //菜品消耗单详情列表
      foodConSumItemList:[],
      //菜品消耗单物料明细
      foodConSumGoodsItemList:[],
      foodConSumInfo:{},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.queryParams.mtFoodconsumid=this.$route.query.mtFoodconsumid;
    this.getFoodconsumInfo();
    this.getFoodConSum();
  },
  methods: {
    getFoodConSum(){
      listFoodconsum({id:this.queryParams.mtFoodconsumid}).then(response=>{
        if (response.code==200){
          if (response.rows[0]){
            this.foodConSumInfo=response.rows[0];
          }
        }
      })
    },
    dbGetFoodConSumGoodsItem(row){
      this.foodConSumGoodsItemList=[];
      this.loading1=true;
      this.open=true;
      this.form.foodskuid=row.foodskuid;
      this.form.foodname=row.foodname;
      this.form.amount=Number(row.outamount)+Number(row.notoutamount);
      listFoodconsumGoodsItem({mtFoodconsumitemid:row.id}).then(response=>{
        this.foodConSumGoodsItemList=response.rows;
        this.loading1=false;
      })
    },
    getFoodconsumInfo(){
      this.loading=true;
      listFoodconsumItem(this.queryParams).then(response=>{
        if (response.code==200){
          this.foodConSumItemList=response.rows;
          this.loading=false;
          // this.total=response.total;
          if (this.foodConSumItemList.length>0){
            this.dbGetFoodConSumGoodsItem(this.foodConSumItemList[0])
            //设置高亮
            this.$refs.ttable.setCurrentRow(this.foodConSumItemList[0],true)
          }
        }
      })
    },
  }
};
</script>
